<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--{include file='comm/header.tpl'}-->
    <title>商品规格</title>
</head>


<style>
	.fbutton .add {background: url("/framework/flexigrid/css/images/add.png") no-repeat scroll left center rgba(0, 0, 0, 0);}
	 
	div .addVal {
		width:90px;
		margin-bottom:2px;
	    background: url("/framework/flexigrid/css/images/bg.gif") repeat-x scroll center top #EAEAEA;
	    border-color: #CCCCCC #CCCCCC -moz-use-text-color;
	    padding:5px;
	    margin-left:10px;
	    cursor:pointer;
	    border-radius:8px;
	}
</style>

<body>


<div class="container">
  
    <div class="comm_content">

            <div class="search-box">
                <div style="position:relative">
                    <form id="search_form" onsubmit="return false;" class="form-inline">
                    	<span>
                        	规格组名称：<input type="text" name="specGroupName" id="specGroupName" class="form-control w150" />
                        </span>

                        <span>
                        	状态：
                            <select  class="form-control w150" id="useFlg_search" name="useFlg">
                                <option value="">请选择</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </span>

                        <span>
                        	<input type="button" value="查询" class="btn btn-primary" onclick="goodsSpec.search();" />
                        </span>
                        <span>
                            <button onclick="goodsSpec.clearUp();" id="clearBtn" class="btn btn-warning" type="button">重置</button>
                        </span>
                    </form>
                </div>
            </div>

            <table id="flex" style="display:none"></table>

        </div>

</div>

<div id="pop" style="display: none;">

    <form class="form-horizontal" id="editForm" onsubmit="return false;">

        <div class="form-group">
            <label for="specName" class="col-sm-3 control-label"><span class="red">*</span> 规格组名称：</label>
            <div class="col-sm-9">
                <input type="text" class="form-control w300" id="specName" name="specName" />
            </div>
        </div>
        
        <div class="form-group">
            <label for="sortOrder" class="col-sm-3 control-label"><span class="red">*</span> 排序：</label>
            <div class="col-sm-9">
                <input type="text" class="form-control w150" id="sortOrder" name="sortOrder" />
            </div>
        </div>
        <button class="btn btn-default" onclick="goodsSpec.specAdd();" type="button">添加规格</button>
        <div class="specTable" style="width:694px;">
        	<table class="table table-bordered table-hover">
                <thead>
					<tr>
						<th width="40%" style="text-align:center;">规格名称</th>
						<th width="40%" style="text-align:center;">规格值</th>
						<th width="20%" style="text-align:center;">操作</th>
					</tr>
                </thead>

				<tbody class="specBody"></tbody>
            </table>
        </div>
        <input type="hidden" name="useFlg" id="useFlg" value="1" />
        <input type="hidden" name="isColor" id="isColor" value="0" />
        <input type="hidden" name="specID" id="specID" value="" />

    </form>

</div>

<script type="text/javascript">
$("#flex").flexigrid({
    url:"/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=1&xjx=none",
    dataType: "json",
    colModel : [
        <!--{if $edit_permission}-->
        {display: "操作", width : 100, align: "center"},
        <!--{/if}-->
            {display: "规格组名称", width : 280},
            {display: "规格", width : 280 },
            {display: "排序",width : 100, name : "sortOrder", sortable : true},
            {display: "使用状态", width : 100 , align: "center"}
        ],
        <!--{if $edit_permission}-->
        buttons : [
            {name: "添加", bclass: "add", onpress : "goodsSpec.edit"},
            //{separator: true},
            //{name: "删除", bclass: "delete", onpress : "goodsSpec.deleteSpec"}
        ],
        <!--{/if}-->
        sortname: "sortOrder",
        sortorder: "asc",
        usepager: true,
        rp: 10,
        useRp: true,
        showTableToggleBtn: true,
        onSubmit: function() {
            var dt = $('#search_form').serializeArray();
            $("#flex").flexOptions({params: dt});
            return true;
        }
    });

    var goodsSpec = {

        delete_str: "" ,
		useFlg_str : "" ,
		dt:"",
        //搜索规格
        search: function() {
            var dt = $('#search_form').serializeArray();
            $("#flex").flexOptions({params: dt}).flexReload();
        },

        deleteSpec: function() {
            this.delete_str = "";
            $.each($("#flex").find("tr"), function(k, v) {
                if ($(v).hasClass("trSelected")) {
                    goodsSpec.delete_str += "_" + $(v).attr("id").replace("row", "");
                }
            });

            if (this.delete_str == "")
                E.alert("请选择需要删除的商品规格");
            else
                E.confirm("删除当前商品规格，也会同步删除当前商品规格对应的值，您确认删除吗？", "goodsSpec.deleteConfirm");
        },
        
		doAction: function( specID , useFlg ) {
            this.specID = specID;
            this.useFlg = useFlg;
            if( useFlg == 0 )
            	E.confirm("您确认要禁用此商品规格吗？", "goodsSpec.actionConfirm");
            else
            	goodsSpec.actionConfirm() ;
        },
        
        actionConfirm : function () {

        	E.loadding.open('请稍候...');
            $.ajax({
                type: "POST",
                url: "/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=5",
                dataType: "JSON",
                data : { 
					specGroupID: this.specID,
					useFlg: this.useFlg
                },
                success: function( result_obj ) {
                	E.loadding.close();
                    if (result_obj.code == 200) {
                        E.alert(result_obj.message, 2, "goodsSpec.load");
                    } else {
                        E.alert(result_obj.message);
                    }
                }
            });
        },
        
        deleteConfirm: function() {
            this.delete_str = this.delete_str.substr(1);
            $.ajax({
                type: "POST",
                url: "/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=4&delete_str=" + goodsSpec.delete_str,
                dataType: "JSON",
                success: function( result_obj ) {
                    if (result_obj.code == 200) {
                        E.alert(result_obj.message, 2, "goodsSpec.load");
                    } else {
                        E.alert(result_obj.message);
                    }
                }
            });
        },

        //编辑或添加弹出框
        edit: function(specID) {

            E.loadding.open('请稍候...');
            var name="";

            if(specID){
                name="修改商品规格";
                E.ajax_post({
                    url: "/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=6",
                    data:{
                    	specID : specID,
                    	isSpec : 1
                    },
                    call:"goodsSpec.val"
                });
                
            }else{
                name="添加商品规格";
                E.ajax_post({
                    url:"/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=7" ,
                    call:"goodsSpec.sortUp"
                });
                
            }

            E.popup.open({
                id:"pop",
                title: name,
                css: "width: 760px;margin:-10px auto;overflow:visible;",
                btnName: "保存",
                btnCall:"goodsSpec.check();"
            });
        },


        //编辑弹出层赋值
        val: function(o){
        	E.loadding.close();
            $("#specName").val(o.specName);
            $("#useFlg").val(o.useFlg);
            $("#specID").val(o.specID);
            $("#sortOrder").val(o.sortOrder);
            if (o.isColor == 1) {
            	$('[id=isColor_1]').attr('checked','true');
            } else {
            	$('[id=isColor_0]').attr('checked','true');
            }
            
            //规格值
            var specStr = '';
            
            for(var i=0; i< o.specArray.length; i++) {
            	specStr += '<tr>';
	        		specStr += '<td style="text-align:center;">';
	        			specStr += '<input type="text" name="spec_val" class="form-control input-sm" value="'+o.specArray[i]['specName']+'" style="width:200px;margin: auto;" maxlength="20">';
	        		specStr += '</td>';
                    specStr += '<td style="text-align:center;">';
                    specStr += '<input type="text" name="specVal" class="form-control input-sm" value="'+o.specArray[i]['specVal']+'"  style="width:200px;margin: auto;" maxlength="20">';
                    specStr += '</td>';
	        		specStr += '<td style="text-align:center;vertical-align:middle;">';
	        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_asc.gif" title="向上移动" style="cursor:pointer;" onclick="goodsSpec.upMove(this);">';
	        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_desc.gif" title="向下移动" style="cursor:pointer;margin-left:12px;" onclick="goodsSpec.downMove(this);">';
	        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_delete.gif" title="删除" value='+o.specArray[i]['specID']+' style="cursor:pointer;margin-left:12px;" onclick="goodsSpec.delMove(this);">';
	        		specStr += '</td>';
	        	specStr += '</tr>';
            }
 
        	$('.specBody').append(specStr);
        },


        check: function() {
            this.dt = E.getFormValues("editForm");
            var error_msg = "";

            if (this.dt.specName == "")
                error_msg += "规格组名称不能为空<br />";

            if (!E.isInt(this.dt.sortOrder))
                error_msg += "排序序号必须为数字<br />";
                
            //检查规格名称
            var spec_array = [];
            $('[name=spec_val]').each(function(k,v){
            	if (E.trim($(v).val()) != '') {
            		spec_array.push(E.trim($(v).val()));
            	}
            });
            //检查规格值
            var specVal = [];
            $('[name=specVal]').each(function(k,v){
                if (E.trim($(v).val()) != '') {
                    specVal.push(E.trim($(v).val()));
                }
            });
            
            if ($('[name=spec_val]').length <= 0) {
            	error_msg += "请添加规格名称<br />";
            }

            if ($('[name=specVal]').length <= 0) {
                error_msg += "请添加规格值<br />";
            }
            
            this.spec_array = spec_array;
            this.specVal = specVal;
            if (spec_array.length != $('[name=spec_val]').length) {
            	error_msg += "规格名称不能为空<br />";
            }

            if (specVal.length != $('[name=specVal]').length) {
                error_msg += '规格值不能为空<br />';
            }

            if (error_msg != "") {
                E.alert(error_msg);
            }else {
                goodsSpec.addSave() ;
            }    
        },

        //保存规格信息
        addSave: function() {
        	
            E.loadding.open("请稍候");
            
            sortOrder++;
            $.ajax({
                type: "POST",
                url: "/invokingAjax-backend/goods/goodsSpec.ajax?operFlg=2" ,
                dataType: "JSON",
                data: {
                	specID : this.dt.specID,
                	specName : this.dt.specName,
                	sortOrder : this.dt.sortOrder,
                	isColor : this.dt.isColor,
                	spec_array : this.spec_array,
                    specVal : this.specVal
                },
                success: function( result_obj ) {
                	
                	E.loadding.close();
                	
                    if (result_obj.code == 200) {
                        goodsSpec.load();
                        if(result_obj.specID){
                            E.alert(result_obj.message, 2, "E.popup.close");
                        }else{
                            $("#sortOrder").val(result_obj.sortOrder);
                            $("#specName").val('');
                            $('[id=isColor_0]').attr('checked','true');
                            $('.specBody').html('');
                            E.alert(result_obj.message, 2);
                        }
                    } else {
                        E.alert(result_obj.message);
                    }
                }
            });
        },


        //最大序列号重置
        sortUp:function(o){
        	E.loadding.close();
            $("#sortOrder").val(o.sortOrder);
        },

        load: function() {
            $("#flex").flexReload();
        },
        
        //添加规格行
        specAdd : function(){
        	
        	var specStr = '';
        	specStr += '<tr>';
        		specStr += '<td style="text-align:center;">';
        			specStr += '<input type="text" name="spec_val" class="form-control input-sm" style="width:200px;margin: auto;" maxlength="20">';
        		specStr += '</td>';
                specStr += '<td style="text-align:center;">';
                specStr += '<input type="text" name="specVal" class="form-control input-sm" style="width:200px;margin: auto;" maxlength="20">';
                specStr += '</td>';
        		specStr += '<td style="text-align:center;vertical-align:middle;">';
        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_asc.gif" title="向上移动" style="cursor:pointer;" onclick="goodsSpec.upMove(this);">';
        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_desc.gif" title="向下移动" style="cursor:pointer;margin-left:12px;" onclick="goodsSpec.downMove(this);">';
        			specStr += '<img src="/quanliadmin/docroot/images/backend/icon_delete.gif" title="删除" style="cursor:pointer;margin-left:12px;" onclick="goodsSpec.delMove(this);">';
        		specStr += '</td>';
        	specStr += '</tr>';
        	
        	$('.specBody').append(specStr);
        },
        
        upMove : function(obj){
        	var objParentTR = $(obj).parent().parent();
			var prevTR = objParentTR.prev();
			if (prevTR.length > 0) {
				prevTR.insertAfter(objParentTR);
			}
        },
        
        downMove : function(obj){
        	var objParentTR = $(obj).parent().parent();
			var nextTR = objParentTR.next();
			if (nextTR.length > 0) {
				nextTR.insertBefore(objParentTR);
			}
        },
        
        delMove : function(obj){
        	
        	//检查当前规格组是否存在商品
        	var currentSpec = $(obj).attr('value');
        	
        	if (currentSpec) {
        		
	        	this.dt = E.getFormValues("editForm");

	        	$.ajax({
	                type: "POST",
	                url: "/invokingAjax-backend/goods/spec.ajax?operFlg=8",
	                dataType: "JSON",
	                data : { 
						specGroupID : this.dt.specID,
						specID : currentSpec
	                },
	                success: function( result_obj ) {
	                    if (result_obj.code == 400) {
	                        E.alert(result_obj.message);
	                    } else {
	                    	$(obj).parent().parent().remove();
	                    }
	                }
	            });
        	} else {
        		$(obj).parent().parent().remove();
        	}
        },
        
        clearUp: function(){
        	$('#specGroupName').val('');
            $('#useFlg_search').val('');
        }

    };
</script>

</body>

</html>
